<template>
  <div class="test1">
    <!-- <div class="">
      <div v-for="item in 10" :key="item">
        <img
          :style="{ transform: `rotate(${windDirection}deg)` }"
          src="../../../public/vite.svg"
          alt="wind icon"
        />
      </div>
    </div> -->
    <div style="display: flex">
      <div v-for="item in newarrTime" style="width: 150px">
        <p>{{ item }}</p>
        <img
          class="imgs"
          :style="{ transform: `rotate(${windDirection}deg)` }"
          src="../../../public/vite.svg"
          alt="wind icon"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
// import { OBJLoader } from "three/addons/loaders/OBJLoader.js";

// 假设有一个包含对象的时间数组
const timeObjects = ref([
  { id: 1, date: formatDate(new Date()) }, // 当前时间
  { id: 2, date: new Date("2024/03/11 13:00") }, // 两小时后
  {
    id: 3,
    date: new Date(
      new Date("2024/03/11 13:00").getTime() + 1000 * 60 * 60 * 4 * 1
    ),
  }, // 两天后
]);

function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 获取当前时间和一天后的时间
const now = new Date();
// const oneDayLater = new Date(now.getTime() + 1000 * 60 * 60 * 24);
const oneDayLater = new Date();

// 筛选出现在到一天后的所有对象
const filteredTimeObjects = timeObjects.value.filter(
  (obj) => obj.date >= now && obj.date <= oneDayLater
);

// 你可以在这里打印或以其他方式使用filteredTimeObjects
console.log(filteredTimeObjects);

const windDirection = ref<number>(0); // 初始角度为0度

const updateWindDirection = () => {
  // 获取到了新的风向角度
  windDirection.value += 1;
  if (windDirection.value > 360) {
    windDirection.value = 0;
  }
};

const arrTime = ref<string[]>([
  "2019-01-02 14:44:44",
  "2019-01-03 14:44:44",
  "2019-01-04 14:44:44",
]);

const newarrTime = ref<any[]>([]);
newarrTime.value = arrTime.value.map((item) => {
  item = item.split(" ")[0];
  // console.log(item);
  return item;
});

onMounted(() => {
  const intervalId = setInterval(updateWindDirection, 0);

  // 在组件销毁时清除定时器
  onUnmounted(() => {
    clearInterval(intervalId);
  });
});
</script>

<style scoped>
img {
  width: 100px;
  height: 100px;
}

.flex {
  display: flex;
}

.imgs {
  width: 20px;
  height: 20px;
}
</style>
